<template>
  <div>
    <yd-navbar title="换绑手机" bgcolor="#008eff" color="#ffffff">
      <router-link to="#" slot="left">
        <yd-navbar-back-icon color="#ffffff"></yd-navbar-back-icon>
      </router-link>
    </yd-navbar>
    <yd-cell-group>
        <yd-cell-item>
            <span slot="left">手机号：</span>
            <input type="number" slot="right" placeholder="请输入手机号码">

            <!-- ↓↓关键代码是这里↓↓ -->
            <yd-sendcode slot="right" 
                         v-model="start1" 
                         @click.native="sendCode1" 
                         type="warning"
            ></yd-sendcode>
            <!-- ↑↑关键代码是这里↑↑ -->

        </yd-cell-item>
        <yd-cell-item>
            <span slot="left">验证码：</span>
            <input slot="right" type="number" placeholder="请输入验证码">
        </yd-cell-item>
        <yd-button size="large" type="primary" class="btn-blockzdy" disabled >验证后绑定新手机号 </yd-button>
    </yd-cell-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      start1: false
    }
  },
  methods: {
    sendCode1() {
      this.$dialog.loading.open('发送中...');
      setTimeout(() => {
        this.start1 = true;
        this.$dialog.loading.close();
        this.$dialog.toast({
          mes: '已发送',
          icon: 'success',
          timeout: 1500
        });
      }, 1000);
    }
  }
}
</script>

<style>
body{
  background-color: #f5f5f5;
}
.m-cell{
  margin-top: 10px;
  background: inherit;
}
.cell-item:not(:last-child):after{
  margin-left: 0;
}
.btn-blockzdy {
  width: 90%;
  margin: auto;
  margin-top: 10px;
}
.m-cell:after{
  border-bottom: 0;
} 
</style>
